<template>
  {{ test }}
  <ee-button class="tra" @transitionrun="test2('run')" @transitionstart="test2('start')"
             @transitioncancel="test2('cancel')" @transitionend="test2">
    测试transtion
  </ee-button>

  <test-ee title="测试弹窗">
    <ee-button @click="test.test1 = true">
      普通弹窗
    </ee-button>
    <ee-popup :scrollable="test.sc" v-model="test.test1">
      测试内容
      <ee-button color="primary" @click="test.sc = !test.sc">测试是否可以滚动</ee-button>
    </ee-popup>

    <ee-button @click="test.test2 = true">
      没有遮罩
    </ee-button>
    <ee-popup overlay="2" v-model="test.test2">测试内容</ee-popup>

    <ee-button @click="test.test3 = true">
      不能点击遮罩关闭弹窗
    </ee-button>
    <ee-popup overlay="5" v-model="test.test3">
      <p @click="test.test3 = false">点我关闭弹窗</p>
    </ee-popup>

    <ee-button @click="test.test4 = true">
      局部弹窗
    </ee-button>
    <ee-popup style="color:#fff" position="" :overlay="test.type ?? '6'" v-model="test.test4">
      <p @click="test.test4 = false">加载中</p>
      <ee-button @click="test.type = test.type ? undefined : '4'">测试修改是否全屏</ee-button>
    </ee-popup>

    <ee-button @click="test.test5 = true">
      不同方向出来的弹窗
    </ee-button>
    <ee-popup @begin="(v) => test2('begin')" @end="(v) => test2('end')" @in="(v) => test2('in')"
              @out="(v) => test2('out')" :position="test.pos" v-model="test.test5" class="bgwhite">
      <div class="fa">
        <ee-button @click="test.pos = 'center'">中</ee-button>
        <ee-button @click="test.pos = 'top'">上</ee-button>
        <ee-button @click="test.pos = 'right'">右</ee-button>
        <ee-button @click="test.pos = 'bottom'">下</ee-button>
        <ee-button @click="test.pos = 'left'">左</ee-button>
      </div>
    </ee-popup>

    <ee-button @click="test.test6 = true">
      关闭前确认
    </ee-button>
    <ee-popup @out="test2" :on-close="() => dialog('确认要关闭吗')" v-model="test.test6">
      测试内容
    </ee-popup>

    <!-- <van-popup show="true">测试vant的弹窗</van-popup> -->
  </test-ee>

  <test-ee title="测试对话框">
    <ee-button @click="t2.t1 = true">
      普通对话框
    </ee-button>
    <ee-dialog confirm closeable title="标题" :text="t2.text" v-model="t2.t1"></ee-dialog>

    <ee-button @click="t2.t2 = true">
      无标题对话框
    </ee-button>
    <ee-dialog cancel :text="t2.text" v-model="t2.t2"></ee-dialog>

    <ee-button @click="t2.t3 = true">
      确认对话框
    </ee-button>
    <ee-dialog confirm cancel :text="t2.text" v-model="t2.t3" :on-result="test2" :on-cancel="() => test2('取消')"
               :on-confirm="() => test2('确认')"></ee-dialog>

    <ee-button @click="t2.t4 = true">
      英文对话框
    </ee-button>
    <ee-dialog confirm confirm-text="Confirm" cancel cancel-text="Cancel" :text="t2.text" v-model="t2.t4"></ee-dialog>

    <ee-button @click="t2.t5 = true">
      带Icon对话框
    </ee-button>
    <ee-dialog icon="icon-iconfontjinggao" :text="t2.text" confirm cancel v-model="t2.t5"></ee-dialog>

    <ee-button @click="dialog(t2.text)">默认</ee-button>
    <ee-button @click="dialog.info(t2.text)">信息</ee-button>
    <ee-button @click="dialog.warning(t2.text)">警告</ee-button>
    <ee-button @click="dialog.error(t2.text)">错误</ee-button>
    <ee-button @click="dialog.success(t2.text)">成功</ee-button>

  </test-ee>

  <test-ee title="测试加载">
    <ee-button v-loading="{ wait: t3.promise, title: '正在加载' }" @click="t3.promise = asyncLoading()">指令局部加载</ee-button>
    <ee-button @click="loading({ overlay: '4', onClick: () => dialog('内部可点') })">API全屏加载</ee-button>
    <ee-button id="apiLoading" @click="loading({ overlay: '6', teleport: '#apiLoading' })">API局部加载</ee-button>

    <ee-button @click="t3.loading = true">延迟弹窗</ee-button>
    <ee-loading delay="2000" v-model="t3.loading" @click="t3.loading = false">
      点我关闭
    </ee-loading>
    <ee-button @click="test2(popup)">打印弹窗内容</ee-button>

    <div style="color:red">bug: 点指令局部和API局部会导致API局部跟随指令局部一起消失</div>
  </test-ee>

  <test-ee title="测试Toast提示">
    <ee-button @click="t4.t1 = !t4.t1">普通提示</ee-button>
    <ee-toast duration="0" icon="icon-iconfontjinggao" text="简单提示" v-model="t4.t1" @click="t4.t1 = false" />

    <ee-button @click="toast(t2.text)">默认</ee-button>
    <ee-button @click="toast.info(t2.text)">信息</ee-button>
    <ee-button @click="toast.warning(t2.text)">警告</ee-button>
    <ee-button @click="toast.error('错误文案')">错误</ee-button>
    <ee-button @click="toast.success('成功文案')">成功</ee-button>
    <ee-button @click="toast.loading('加载中')">加载</ee-button>
    <ee-button @click="toast.loading(dynamicToast())">动态内容</ee-button>
  </test-ee>

  <test-ee title="测试通知">
    <ee-button @click="t5.t1 = !t5.t1">自定义通知</ee-button>
    <ee-notify duration="0" closeable title="提示" icon="icon-iconfontjinggao" :text="t2.text" v-model="t5.t1" confirm
               cancel @click="t5.t1 = false">
    </ee-notify>

    <ee-button @click="notify(Date.now().toString())">默认</ee-button>
    <ee-button @click="notify({ text: Date.now().toString(), position: 'bottom-right' })">右下</ee-button>
    <ee-button @click="notify({ text: Date.now().toString(), position: 'top-left' })">左上</ee-button>
    <ee-button @click="notify({ text: Date.now().toString(), position: 'bottom-left' })">左下</ee-button>
    <ee-button @click="notify({ text: Date.now().toString(), position: 'auto-top' })">自定义</ee-button>
    <ee-button @click="notify.info(Date.now().toString())">信息</ee-button>
    <ee-button @click="notify.warning(Date.now().toString())">警告</ee-button>
    <ee-button @click="notify.error(Date.now().toString())">错误</ee-button>
    <ee-button @click="notify.success(Date.now().toString())">成功</ee-button>
    <ee-button @click="notify.success({ title: Date.now().toString() })">标题</ee-button>
    <ee-button @click="notify.success({ text: Date.now().toString() })">内容</ee-button>
    <ee-button @click="notify.success({ title: '标题', text: Date.now().toString() })">要素都有</ee-button>
    <ee-button @click="notify.closeAll()">关闭所有通知</ee-button>
  </test-ee>

  <test-ee title="测试Alert">
    <ee-button @click="t6.t1 = !t6.t1">自定义Alert</ee-button>
    <ee-alert v-model="t6.t1">
      我是一个提示框
    </ee-alert>

    <ee-button @click="alert(Date.now().toString())">默认</ee-button>
    <ee-button @click="alert.info(Date.now().toString())">信息</ee-button>
    <ee-button @click="alert.warning(Date.now().toString())">警告</ee-button>
    <ee-button @click="alert.error(Date.now().toString())">错误</ee-button>
    <ee-button @click="alert.success(Date.now().toString())">成功</ee-button>
    <ee-button @click="alert.success({ title: '标题', text: Date.now().toString() })">要素都有</ee-button>
    <ee-button @click="alert.closeAll()">关闭所有提示</ee-button>
  </test-ee>

  <p style="margin-bottom:2000px"></p>
  <div style="display:flex">
    <div class="navi" v-for="_navi, index in navi" :key="index">
      {{ index }}
      <div>
        <div class="div1" v-for="one, index in _navi" :key="index">
          <label>{{ one.name }}</label>
          <div class="div2">
            <div v-for="two, index in one.child" :key="index">
              {{ two.name }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">
import { reactive, ref } from 'vue'
import { createStore } from 'ee-vuex'

export default {
  name: "test-ee-popup",
  data() {
    return {
      test: {},
      t2: {
        text: "ee-框架的代码是最优雅的。",
      },
      t3: {},
      t4: {},
      t5: {},
      t6: {},

      navi: {
        '导航1': [],
        '导航2': [
          {
            name: '第一层1', child: [
              { name: '第一层1 第二层1' },
              { name: '第一层1 第二层2' },
              { name: '第一层1 第二层3' },
            ]
          },
          {
            name: '第一层2', child: [
              { name: '第一层2 第二层1' },
              { name: '第一层2 第二层2' },
            ]
          },
          {
            name: '第一层3', child: [
              { name: '第一层3 第二层1' },
              { name: '第一层3 第二层2' },
              { name: '第一层3 第二层3' },
            ]
          },
          {
            name: '第一层4', child: [
              { name: '第一层4 第二层1' },
              { name: '第一层4 第二层2' },
              { name: '第一层4 第二层3' },
              { name: '第一层4 第二层4' },
            ]
          },
        ],
        '导航3': [],
        '导航4': [],
      },
    }
  },
  props: {
  },
  computed: {
  },
  methods: {
    test2(i) {
      console.log("test", i);
    },
    asyncLoading() {
      this.t3.directive = true;
      return new Promise(r => {
        setTimeout(() => {
          this.t3.directive = false;
          r();
        }, 2000);
      })
    },
    dynamicToast() {
      return createStore({
        text: {
          default() {
            let time = 5;
            const countdown = () => {
              const text = `还剩${time}秒`;
              this.text = text;
              if (time-- > 0)
                setTimeout(countdown, 1000)
              return text;
            }
            return countdown();
          }
        },
        duration: 5000
      });
    }
  },
  mounted() {
    setTimeout(() => {
      // const loading = this.loading(createStore({
      //   countdown: [function () {
      //     setInterval(() => {
      //       this.countdown--;
      //     }, 1000)
      //     return 5;
      //   }],
      //   title() { return `请认真阅读条款，剩余${this.countdown}s` },
      // }));

      // let countdown = 5;
      // const popup = this.loading({})
      // const cd = () => {
      //   // 需要对popup.options中的属性赋值才有响应
      //   popup.options.title = `请认真阅读条款，剩余${countdown}s`
      //   countdown--;
      //   return cd;
      // }
      // setInterval(cd(), 1000)

      // new Promise(r => {
      //   setTimeout(() => {
      //     r();
      //     loading.close();
      //     // loading.options.modelValue = false;
      //   }, 2000)
      // })
    })
  }
}
</script>

<style lang="scss" scoped>
.tra {
  transition: background-color 1000ms;
  background-color: lime;
}

.tra:hover {
  background-color: red;
}

.navi {
  display: flex;
  position: relative;

  & > div {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: max-content;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    border-radius: 4px;
    padding: .25em;
    line-height: 1.4em;

    .div1 {
      display: flex;
      padding: 0.5em;

      .div2 {
        display: none;
        padding-left: .5em;

        & > div {
          background-color: rgb(246, 246, 246);
          position: relative;
          padding-bottom: .5em;
          margin-bottom: .5em;
          color: rgb(49, 176, 239);

          &:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            height: 1px;
            width: 50%;
            background-color: #ddd;
          }
        }
      }

      &:hover {
        background-color: rgb(246, 246, 246);

        .div2 {
          display: block;
        }
      }
    }
  }

  &:hover {
    & > div {
      display: block;
    }
  }
}

.bgwhite {
  background-color: white;
}
</style>

<style lang="scss">
#ee-notify-auto-top {
  top: 10vh;
  left: 50%;
  transform: translate(-50%);
}
</style>